<template>
  <div>
    <div @click="toNewSong"><Title title="最新音乐"></Title></div>
    <div class="new-song">
      <div
        class="new-content"
        v-for="item in newSongList"
        :key="item.id"
        :data-id="item.id"
        @click="newSong"
      >
        <div class="newiconfont">
          <span class="iconfont icon-bofang"></span>
        </div>
        <img class="newimg" v-lazy="item.picUrl" />
        <div class="songName">{{ item.name }}</div>
        <el-tag class="Newsq" type="danger" size="mini" effect="plain"
          >SQ</el-tag
        >
        <div class="singer">{{ item.song.artists[0].name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import Title from '../Title/title.vue'

export default {
  name: 'NewSong',
  components: {
    Title,
  },
  data() {
    return {
      newSongList: [],
    }
  },
  methods: {
    async newsong() {
      const res = await this.$API.RecommentSong.reqnewsong()
      this.newSongList = res.result
    },
    // 点击标题实现跳转
    toNewSong() {
      this.$router.history.push({ path: '/' })
    },
    newSong() {
      // 拿到歌曲id
      const { id } = event.currentTarget.dataset
      console.log(id)
      // 跳转页面，并将数据传过去
      this.$router.history.push({
        name: '',
        query: {
          id,
        },
      })
    },
  },
  async mounted() {
    this.newsong()
  },
}
</script>

<style scoped>
.new-song {
  margin-left: 20px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.newiconfont {
  position: absolute;
  margin-left: 15px;
  margin-top: 15px;
}
.new-song .new-content {
  position: relative;
  /* width: 380px; */

  /* flex: 1; */
  /* flex-shrink: 0; */
  flex-grow: 0;
  width: 32%;
  min-width: 32%;
  margin: 10px 0px;
}
.new-song .new-content:hover {
  background-color: rgba(230, 230, 230, 0.7);
  border-radius: 5px;
}
.newimg {
  width: 60px;
  height: 60px;
  border-radius: 5px;
}
.songName {
  position: absolute;
  top: 5px;
  left: 70px;
  font-size: 14px;
}
.Newsq {
  position: absolute;
  top: 30px;
  left: 70px;
}
.singer {
  position: absolute;
  top: 32px;
  left: 105px;
  /* color: rgb(126, 125, 125); */
  font-size: 14px;
  font-weight: lighter;
}
.icon-bofang {
  font-size: 30px;
  color: rgb(235, 150, 124);
  position: absolute;
}
</style>